<template>
    <div>
      <el-card class="box-card">
            <!-- <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select> -->
            <el-button type="primary" style="margin-left: 60px;" @click="addNews">新增</el-button>
            <el-table
            :data="tableData"
            border
            style="width: auto;margin-top: 20px;">
            <el-table-column
                type="index"
                label="序号"
                width="80">
            </el-table-column>
            
            <el-table-column
                prop="title"
                label="文章标题"
                width="180">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建日期"
                width="180">
            </el-table-column>
            <el-table-column
                label="文章插图"
                width="180">
                <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img"
                    fit="cover"></el-image>
               </template>
            </el-table-column>
            <el-table-column
                prop="type"
                label="所属页面"
                width="180">
            </el-table-column>
            <el-table-column
                prop="lastUpdateTime"
                label="上次编辑时间"
                width="180">
            </el-table-column>
            <el-table-column
                label="状态"
                width="120">
                <template slot-scope="scope">
                  <div>{{ scope.row.state=='1'?'未发布':'已发布' }}</div>
               </template>   
            </el-table-column>
            <el-table-column
                prop="publisher"
                label="发布人"
                width="150">
            </el-table-column>
            <el-table-column
                prop="viewNum"
                label="点击量"
                width="150">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editNews(scope.row,1)">编辑</el-button>
                <el-button type="text" size="small" @click="editNews(scope.row,0)">查看</el-button>               
                <el-button type="text" size="small" v-if="scope.row.state=='1'" @click="toState(scope.row,'2')">发布</el-button>
                <el-button type="text" size="small" v-else @click="toState(scope.row,'1')">下架</el-button>
              </template>
            </el-table-column>
            </el-table>
            <div class="pagination-box">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="info.page"
              :page-size="info.pageNum"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
         </div>
        </el-card> 
    </div>
</template>
<script>
import { getNews ,saveArticle} from "@/request/supervisionCenterApi.js"
 export default{
    data(){
        return{
           tableData: [],
           info:{
            pageNum:10,
            page:1,
            companyId:localStorage.getItem("companyId")
           },
           total:0
        }
    },
    mounted(){
       this.newsList()
    },
    methods:{
       async newsList(){
          let res = await getNews(this.info)
          console.log(res)
          this.tableData = res.data.content
          this.total = res.data.totalElements
       },
       addNews(){
        this.$router.push({
            path:'/compenyContral',
           })
       },
       editNews(row,isShow){
          this.$router.push({
            path:'/compenyContral',
            query: {
                data:encodeURIComponent(JSON.stringify(row)),
                isShow:isShow,
                content:row.content
            }
          })
       },
       handleCurrentChange(val) {
          this.info.page = val
          this.newsList()
          console.log(`当前页: ${val}`);
       },
      async toState(row,state){
            let data = JSON.parse(JSON.stringify(row))
            data.state = state
           let res = await saveArticle(data)
           console.log(res)
           if(res.code==200){
               this.$message.success('修改成功')
               row.state = state
           }
       }
    }
 }
</script>
<style lang="less" scoped>
   .box-card{
    width: 100%;
 }
 .pagination-box{
      width: 100%;
      padding: 20px;
      .el-pagination{
        text-align: right;
        margin-right: 200px;
        margin-top: 40px;
      }
    }
</style>